<template>
  <view>
    <swiper class="round-dot" :indicator-dots="true" :circular="true" autoplay="true"
            interval="5000" duration="500" style="height: 480upx;">
      <swiper-item v-if="video" style="height: 466upx;" @click="handlePlayVideo()">
        <view style="width: 100%; position:relative;">
          <image :src="video+'?vframe/jpg/offset/1'" mode="aspectFill" style="width: 100%; height: 466upx;"></image>
          <image src="/static/icon/detail/bofang@2x.png" class="swiper-bofang-btn"></image>
        </view>
      </swiper-item>
      <swiper-item v-if="imgs_arr" v-for="(item,index) in imgs_arr" :key="'A'+index"
                   style="height: 466upx;" @click="handlePreviewImgs(item, imgs_arr)">
        <view style="width: 100%; position:relative;">
          <image :src="item" mode="aspectFill"
                 style="width: 100%; height: 466upx;"></image>
        </view>
      </swiper-item>
    </swiper>
    <view v-show="is_show_video" style="width: 0; position: relative;">
      <video id="myVideo" :src="video" style="width: 0;" controls="true" show-fullscreen-btn="true"
             object-fit="contain" @fullscreenchange="fullScreenChange">
      </video>
    </view>
  </view>
</template>

<script>
export default {
  props:{
    article_data:{
      type: Object,
    },
    imgs_arr:{
      type: Array,
    },
    video:{
      type: String
    }
  },
  data(){
    return {
      is_show_video: false,
    }
  },
  methods:{
    //播放轮播视频
    handlePlayVideo() {
      this.videoContext = uni.createVideoContext('myVideo', this);
      console.log(this.videoContext)
      this.videoContext.requestFullScreen();
      this.videoContext.play()
      this.is_show_video = true;
    },
    //视频全屏
    fullScreenChange(e) {
      if (!e.detail.fullScreen) {
        this.videoContext.pause()
        this.is_show_video = false
      }
    },
    //预览图片
    handlePreviewImgs(img, imgs_arr) {
      uni.previewImage({
        urls: imgs_arr,
        current: img
      });
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .uni-swiper-dots {
  bottom: 24upx !important;
  width: auto;
}

/deep/ .uni-swiper-dot {
  width: 16upx !important;
  height: 16upx !important;
  background-color: white;
}

/deep/ .uni-swiper-dot-active {
  background-color: #E52718;
}

/deep/ .uni-swiper-dot-active::after {
  content: none !important;
  background-color: #E52718 !important;
}
.swiper-bofang-btn {
  position: absolute;
  width: 50upx;
  height: 50upx;
  bottom: 25upx;
  right: 25upx;
}
</style>
